<template>
  <div class="goods-detail-container" v-if="goods">
    <el-card class="goods-detail-card">
      <div class="goods-detail-main">
        <img :src="goods.img_guid" class="goods-detail-img" />
        <div class="goods-detail-info">
          <h2>{{ goods.name }}</h2>
          <div class="goods-detail-price">￥{{ goods.price }}</div>
          <div class="goods-detail-stock">库存：{{ goods.stock || '充足' }}</div>
          <div class="goods-detail-desc">{{ goods.detail }}</div>
          <el-button type="success" @click="addCart">加入购物车</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: null
    }
  },
  methods: {
    loadGoods() {
      const id = this.$route.params.id;
      this.$http.get(`/flower/findAll?page=1&searchKey=`).then(res => {
        if (res.data.code === 2000) {
          // 简单遍历查找，实际可用后端单条接口优化
          const all = res.data.data.items;
          this.goods = all.find(g => g.id == id);
        }
      });
    },
    addCart() {
      if (!this.goods) return;
      const param = {
        fid: this.goods.id,
        flower: this.goods.name,
        account: window.sessionStorage.getItem("token")
      };
      this.$http.post("/cart/create", param).then(result => {
        let R = result.data;
        if (R.code === 2000) {
          this.$message.success(R.msg);
        } else {
          this.$message.error(R.msg);
        }
      });
    }
  },
  created() {
    this.loadGoods();
  }
}
</script>

<style scoped>
.goods-detail-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 0;
}
.goods-detail-card {
  padding: 30px;
}
.goods-detail-main {
  display: flex;
  gap: 40px;
}
.goods-detail-img {
  width: 350px;
  height: 350px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.goods-detail-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.goods-detail-price {
  color: #ff6a00;
  font-size: 28px;
  margin: 20px 0 10px 0;
}
.goods-detail-stock {
  color: #67c23a;
  margin-bottom: 10px;
}
.goods-detail-desc {
  color: #666;
  font-size: 16px;
  margin-bottom: 30px;
}
</style> 